<template>
  <div style="background-color: #F0F3F7; width: 100%; height: 100%;">
    <img class="BgImg" src="../assets/image/bg.png" alt="" />
    <div class="login-container">
      <div class="login-header">
      </div>
      <div class="fdr">
       
        <el-form
          ref="loginForm"
          :model="loginForm"
          :rules="loginRules"
          class="form"
          autocomplete="on"
          label-position="left"
        >
          <div class="title"><img src="../assets/image/xinlogo.png" alt=""></div>
          <el-form-item class="inputDiv mt80" prop="username">
            
            <el-input
              class="userInput"
              placeholder="请输入您的账号"
              v-model="loginForm.username"
              name="username"
              type="text"
              tabindex="1"
              autocomplete="on"
            />
          </el-form-item>
          <el-form-item class="inputDiv mt20" prop="password">
           
            <el-input
              ref="password"
              class="userInput"
              placeholder="请输入您的密码"
              v-model="loginForm.password"
              type="password"
              name="password"
              tabindex="2"
              autocomplete="on"
              @blur="capsTooltip = false"
              @keyup.enter.native="handleLogin"
            />
          </el-form-item>
          <el-form-item class="codeDiv mt20" prop="code" v-if="isCode">
            <el-input
              ref="code"
              class="codeInput"
              placeholder="请输入验证码"
              v-model="loginForm.code"
              name="code"
              type="text"
              tabindex="1"
              autocomplete="on"
            />
            <img class="codeImg" :src="codeUrl" alt="" />
          </el-form-item>
          <el-button
            :loading="loading"
            class="login-btn mt20"
            @click.native.prevent="handleLogin"
            >登录</el-button
          >
        </el-form>
      </div>
      
    </div>
  </div>
</template>

<script>
import QRCode from "qrcode";
import { md5 } from "../config/md5.js";
import store from "../vuex/store.js";
import axios from "axios";
export default {
  name: "login",
  data() {
    const validateUsername = (rule, value, callback) => {
      if (!value) {
        callback(new Error("请输入用户名"));
      } else {
        callback();
      }
    };
    const validatePassword = (rule, value, callback) => {
      if (!value) {
        callback(new Error("请输入密码"));
      } else {
        callback();
      }
    };
    return {
      // 轮询二维码获取
      qr_code: false,
      account: "",
      loading: false,
      disabled: true,
      type: false,
      type2: true,
      pswdType: false,
      footerHide: true,
      // websocket
      websocket: null,
      time: false,
      setTime: null,
      clientId: "",
      password: "",
      ok: true,
      // 验证码
      sendStatus: 1,
      sendNum: 60,
      code: "",
      sendSetTime: null,
      modal: false,
      footHide: true,

      conceal: true,
      store,
      isneed: false,

      //
      loginForm: {
        username: "",
        password: "",
        code: "",
      },

      isCode: false,
      codeUrl: "",
      loginRules: {
        username: [
          { required: true, trigger: "blur", validator: validateUsername },
        ],
        password: [
          { required: true, trigger: "blur", validator: validatePassword },
        ],
        code: [{ required: true, trigger: "blur", message: "请输入验证码" }],
      },
    };
  },

  created(a) {
    // console.log('123')
    if (localStorage.getItem("token")) {
      this.navTo();
    }
    if (this.$router.history.current.query.code) {
      this.codeSign(window.atob(this.$router.history.current.query.code));
    }
  },
  mounted() {
    this.enter();
  },
  watch: {
    account: function () {
      this.disabledStatus();
    },
    code: function () {
      this.disabledStatus();
    },
  },
  beforeDestroy() {
    clearInterval(this.setTime);
  },
  methods: {
    // cms
    // 登录
    handleLogin() {
      this.$refs.loginForm.validate((valid) => {
        if (valid) {
          this.loading = true;
          // this.$store
          //   .dispatch("user/login", this.loginForm)
          //   .then(() => {
          //     this.$router.push({
          //       path: this.redirect || this.$store.getters.asyncRoutes[0].path,
          //     });
          //     this.loading = false;

          //   })
          //   .catch(() => {
          //     this.isNeedKaptcha();
          //     this.loading = false;
          //     this.index++;
          //   });
          this.$http(
            "/chongqing/stage/web/login",
            {
              // password: md5(code.split("&")[1]),
              password: md5(this.loginForm.password),
              username: this.loginForm.username,
              code: this.loginForm.code,
            },
            "post",
            (res) => {
              console.log(res.data);
              if (res.data.code == 1000) {
                let data = res.data.data;
                localStorage.clear();
                localStorage.setItem("superAdmin", false);
                localStorage.setItem("userName",data.username)
                this.$store.state.superAdmin = false;
                 this.$store.state.userName = data.username;
                this.$store.state.token = data.token;
                localStorage.setItem("token", data.token);
                // this.getMenus(); //获取菜单
                // this.$store.state.museumId = "";
                // localStorage.setItem("museumId", "");
                // this.$store.state.museums = [];
                // localStorage.setItem("museums", JSON.stringify([]));

                this.$router.push({ name: "main" });
                // this.$store.state.museumName = "安吉自然博物院";
                // localStorage.setItem("museumName", "安吉自然博物院");
                // clearInterval(this.setTime);
              } else {
                // this.$Message.error("自动登录出现了错误");
                 this.getIsCode(); // 是否获取验证码
                this.$Message.error(res.data.msg);
              }
              this.loading = false;
            }
          );
        } else {
          return false;
        }
      });
    },
    // 查询是否验证码
    getIsCode() {
      this.$http(
        "/chongqing/stage/kaptcha/isNeedKaptcha",
        {
          username: this.loginForm.username,
        },
        "get",
        (res) => {
          console.log(res.data);
          if (res.data.code == 1000) {
            console.log(res.data.data);
            this.isCode = res.data.data;
            this.getCode();
          } else {
            this.isCode = false;
          }
        }
      );
    },
    // 获取验证码
    getCode() {
      axios
        .get( this.baseUrl+"/chongqing/stage/kaptcha/render", {
          responseType: "arraybuffer",
        })
        .then((res) => {
          console.log(res);
          // buffer转译
          let img64 = btoa(
            new Uint8Array(res.data).reduce(
              (data, byte) => data + String.fromCharCode(byte),
              ""
            )
          );
          this.codeUrl = "data:image/gif;base64," + img64;
        });
    },
    // 获取菜单
    // getMenus() {
    //   this.$http(
    //     "/ztmuseum/stage/web/getMenus",
    //     {},
    //     "get",
    //     (res) => {
    //       console.log(res.data);
    //       if (res.data.code == 1000) {
           
    //       } else {
    //       }
    //     }
    //   );
    // },
    //
    blur() {
      console.log(this.account);
      this.$http(
        "/stage/user/isNeedVerificationCode",
        {
          account: this.account,
        },
        "get",
        (res) => {
          if (res.data.code == 200) {
            console.log(res.data.data);
            this.isneed = res.data.data;
          } else {
            this.isneed = false;
          }
        }
      );
    },
    navTo() {
      let menus = JSON.parse(localStorage.getItem("menus"));
      let firstM = menus[0];
      let name = firstM.menuName;
      if (firstM.children.length > 0) {
        name = firstM.children[0].menuName;
      }
      this.$router.push({ name });
    },
    codeSign(code) {
      this.modal = true;
      this.$http(
        "/stage/user/loginByPwd",
        {
          password: md5(code.split("&")[1]),
          username: code.split("&")[0],
        },
        "post",
        (res) => {
          if (res.data.code == 200) {
            let data = res.data.data;
            localStorage.clear();

            localStorage.setItem("superAdmin", false);
            this.$store.state.superAdmin = false;

            this.$store.state.token = data.token;
            localStorage.setItem("token", data.token);

            this.$store.state.museumId = "";
            localStorage.setItem("museumId", "");
            this.$store.state.museums = [];
            localStorage.setItem("museums", JSON.stringify([]));
            this.$router.push({ name: "场馆信息" });
            this.$store.state.museumName = "安吉自然博物院";
            localStorage.setItem("museumName", "安吉自然博物院");
            clearInterval(this.setTime);
          } else {
            this.$Message.error("自动登录出现了错误");
            this.modal = false;
          }
        }
      );
    },

    change(data) {
      if (data == 1) {
        this.$router.push({ name: "免费申请" });
      } else {
        this.type = !this.type;
        if (!this.qr_code && this.type) {
          this.getScanCode();
        }
      }
    },

    getScanCode() {
      this.qr_code = true;
      this.$http("/stage/user/getScanCode", {}, "get", (res) => {
        if (res.data.code == 200) {
          var msg = document.getElementById("QRCode");
          QRCode.toCanvas(msg, res.data.data, function (error) {});
          this.clientId = res.data.data.split("clientId=")[1];
          this.polling();
        } else {
          this.$Message.error("获取二维码失败");
        }
      });
    },
    polling() {
      let that = this;
      this.setTime = setInterval(function () {
        that.$http(
          "/stage/user/polling",
          {
            clientId: that.clientId,
          },
          "get",
          (res) => {
            if (res.data.code == 200) {
              if (res.data.data) {
                that.ok = false;
                clearInterval(that.setTime);
                let data = res.data.data;
                localStorage.clear();

                if (data.adminType == 1) {
                  that.$store.state.superAdmin = true;
                  localStorage.setItem("superAdmin", true);
                } else {
                  that.$store.state.superAdmin = false;
                  localStorage.setItem("superAdmin", false);
                }
                localStorage.setItem("isv", res.data.data.isv);
                that.$store.state.token = data.token;
                localStorage.setItem("token", data.token);

                if (data.adminType == 1) {
                  that.$store.state.museumId = "";
                  localStorage.setItem("museumId", "");
                  that.$store.state.museums = [];
                  localStorage.setItem("museums", JSON.stringify([]));
                  that.$router.push({ name: "场馆信息" });
                } else if (data.adminType == 2) {
                  that.$http(
                    "/stage/museum/getAppMuseumDropDown",
                    {},
                    "post",
                    (Res) => {
                      if (Res.data.code == 200) {
                        that.$store.state.museums = Res.data.data;
                        localStorage.setItem(
                          "museums",
                          JSON.stringify(Res.data.data)
                        );
                        that.$store.state.museumId = Res.data.data[0].id;
                        localStorage.setItem("museumId", Res.data.data[0].id);
                        that.$store.state.museumName = Res.data.data[0].name;
                        localStorage.setItem(
                          "museumName",
                          Res.data.data[0].name
                        );
                        localStorage.setItem(
                          "museumName",
                          Res.data.data[0].name
                        );
                        that.$router.push({ name: "场馆信息" });
                      } else {
                        that.$Message.error(Res.data.msg);
                      }
                    }
                  );
                } else {
                  that.$store.state.museums = data.museums;
                  localStorage.setItem("museums", JSON.stringify(data.museums));
                  that.$store.state.museumId = data.museums[0].id;
                  localStorage.setItem("museumId", data.museums[0].id);
                  that.$store.state.museumName = data.museums[0].name;
                  localStorage.setItem("museumName", data.museums[0].name);
                  that.$router.push({ name: "场馆信息" });
                }
              } else {
              }
            }
          }
        );
      }, 1000);
    },

    submit() {
      if (this.account.trim().length == 0) {
        this.$Message.error("账号或手机号不能为空");
        return false;
      }
      this.login();
    },
    enter() {
      document.onkeydown = (event) => {
        let e = event || window.event;
        if (e.keyCode === 13 && this.$route.name === "signin") {
          this.handleLogin();
        }
      };
    },
    disabledStatus() {
      if (this.account.trim().length != 0 && this.code.trim().length != 0) {
        this.disabled = false;
      } else {
        this.disabled = true;
      }
    },
    login() {
      this.loading = true;
      this.$http(
        "/stage/user/login",
        {
          password: this.password ? md5(this.password) : "",
          // password: '16bed27e22052a55270ff4ca5af43b98',
          username: this.account,
          code: this.code,
        },
        "post",
        (res) => {
          if (res.data.code == 200) {
            let data = res.data.data;
            localStorage.clear();

            if (data.adminType == 1) {
              this.$store.state.superAdmin = true;
              localStorage.setItem("superAdmin", true);
            } else {
              this.$store.state.superAdmin = false;
              localStorage.setItem("superAdmin", false);
            }
            console.log(1, res.data.data.isv);
            localStorage.setItem("isv", res.data.data.isv);
            console.log("aaa", this.$store);
            this.$store.state.token = data.token;
            localStorage.setItem("token", data.token);

            let that = this;
            if (data.adminType == 1) {
              this.$store.state.museumId = "";
              localStorage.setItem("museumId", "");
              this.$store.state.museums = [];
              localStorage.setItem("museums", JSON.stringify([]));
              this.$router.push({ name: "场馆信息" });
              clearInterval(this.setTime);
            } else if (data.adminType == 2) {
              this.$http(
                "/stage/museum/getAppMuseumDropDown",
                {},
                "post",
                (Res) => {
                  if (Res.data.code == 200) {
                    this.$store.state.museums = Res.data.data;
                    localStorage.setItem(
                      "museums",
                      JSON.stringify(Res.data.data)
                    );
                    this.$store.state.museumId = Res.data.data[0].id;
                    localStorage.setItem("museumId", Res.data.data[0].id);
                    this.$store.state.museumName = Res.data.data[0].name;
                    localStorage.setItem("museumName", Res.data.data[0].name);
                    this.$router.push({ name: "场馆信息" });
                    clearInterval(this.setTime);
                  } else {
                    this.$Message.error(Res.data.msg);
                  }
                }
              );
            } else {
              this.$store.state.museums = data.museums;
              localStorage.setItem("museums", JSON.stringify(data.museums));

              this.$store.state.museumId = data.museums[0].id;
              console.log(12323123123);
              localStorage.setItem("museumId", data.museums[0].id);

              this.$store.state.museumName = data.museums[0].name;
              localStorage.setItem("museumName", data.museums[0].name);

              this.$router.push({ name: "场馆信息" });
              clearInterval(this.setTime);
            }
          } else {
            this.loading = false;
            this.$Message.error(res.data.msg);
          }
        }
      );
    },

    sendYZM() {
      if (this.account == "") {
        this.$Message.error("请先输入账号或手机号");
        return false;
      }
      this.sendStatus = 2;
      this.$http(
        "/stage/user/getLoginCaptcha",
        {
          account: this.account,
        },
        "get",
        (res) => {
          if (res.data.code == 200) {
            this.sendStatus = 3;
            this.$Modal.info({
              title: "发送成功",
              content: "验证码已发送到" + res.data.data + ",请注意查收",
            });
            let that = this;
            this.sendSetTime = setInterval(function () {
              if (that.sendNum == 0) {
                that.sendNum = 60;
                that.sendStatus = 1;
                clearInterval(that.sendSetTime);
              } else {
                that.sendNum--;
              }
            }, 1000);
          } else {
            this.sendStatus = 1;
            this.$Message.error(res.data.msg);
          }
        }
      );
    },
    free() {
      this.type2 = !this.type2;
    },
  },
};
</script>



<style scoped>
.fdr {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}

.BgImg {
  position: absolute;
  z-index: -1;
  height: 100%;
  width: 100%;
}
.login-container {
  /* background-color: #F0F3F7; */
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;

}

.login-header {
  width: 100%;
  height: 120px;
  /* border: 1px solid rgb(255, 0, 0); */
  position: relative;
}

.logo-name {
  width: 20%;
  margin-top: 20px;
  margin-left: 20px;
}

.museumImg {
  width: 40%;
}
.form {
  width: 40%;
  height: 400px;
  /* border: 1px solid sandybrown; */
  margin-top: 7%;
  text-align: center;
}
.title {
  color: #c69564;
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: 0.2rem;
}
.mt80 {
  margin: 80px auto 0;
}
.mt20 {
  margin: 20px auto 0;
}
.form >>> .el-form-item__content {
  display: flex;
  align-items: center;
  line-height: 32px;
}
.codeDiv >>> .el-form-item__content {
  display: flex;
  /* justify-content: space-between; */
  align-items: center;
  width: 300px;
  height: 32px;
}
.form >>> .el-button {
  padding: 0;
}
.inputDiv {
  width: 300px;
  height: 36px;
  border: 1px solid #377FF6 ;
  border-radius: 4px;
  background: #f5f5f5;
}
.userImg {
  width: 20px;
  height: 20px;
  /* display: inline-block; */
  margin-left: 10px;
}
.inputDiv >>> .el-input__inner {
  border: 0;
  background: transparent;
  padding: 0;
  margin: 0;
  height: 30px;
  width: 200px;
  outline: none;
}
/* .inputDiv >>> .el-input__inner:focus {
  border: none;
} */
.codeDiv >>> .el-input__inner {
  border: 0;
  background: transparent;
  padding: 0;
  margin: 0;
  height: 30px;
  width: 140px;
  outline: none;
}
.codeDiv >>> .el-input__inner:focus {
  border: none;
}
.userInput {
  width: 70%;
  height: 100%;
  border: none;
  background: transparent;
  margin-left: 6px;
}
.codeDiv {
  width: 300px;
  height: 36px;
  margin: 20px auto 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: row;
}
.codeInput {
  width: 204px;
  height: 36px;
  border: 1px solid #377FF6 ;
  border-radius: 4px;
  background: #f5f5f5;
}
.codeImg {
  width: 74px;
  height: 36px;
  border-radius: 4px;
  margin-left: 20px;
}
.login-btn {
  width: 300px;
  height: 36px;
  background: #377FF6 ;
  border-radius: 4px;
  font-size: 16px;
  letter-spacing: 3px;
  color: #ffffff;
  text-align: center;
  line-height: 34px;

  position: relative;
}

.forgot-pwd {
  color: #c69564;
  font-size: 12px;
  font-weight: normal;
  position: absolute;
  bottom: -30px;
  right: 0;
}

.header-right {
  width: 70%;
  height: 100%;
  /* border: 1px solid darkblue; */
  position: absolute;
  top: 0;
  right: 0;
}
.box {
  width: 180px;
  height: 80px;
  border-radius: 1px;
  position: absolute;
}
.box1 {
  background: #c69564;
  top: 0;
  right: 0;
  z-index: 2;
}
.box2 {
  background: #e7ba8d;
  top: 1rem;
  right: 1rem;
  z-index: 1;
}
.line1 {
  width: 55%;
  height: 1px;
  background: #c69564;
  position: absolute;
  bottom: 0;
  right: 6rem;
}
.line2 {
  width: 1px;
  height: 120px;
  background: #c69564;
  position: absolute;
  top: 4.5rem;
  right: 14.75rem;
}
.slash {
  width: 1px;
  height: 22px;
  background: #c69564;
  transform: rotate(30deg);
  position: absolute;
  bottom: -10px;
}
.slash1 {
  right: 65%;
}
.slash2 {
  right: 67%;
}
.slash3 {
  right: 69%;
}
.slash4 {
  right: 71%;
}
.slash5 {
  right: 73%;
}
.slash6 {
  right: 75%;
}

.footDiv {
  width: 100%;
  height: 120px;
  position: relative;
}

.footbox1 {
  position: absolute;
  top: 0;
  right: 0;
  width: 100px;
  height: 120px;
  background: #c69564;
}
.triangle {
  width: 0;
  height: 0;
  border: 60px solid transparent;
  border-bottom-color: #c69564;
  border-right-color: #c69564;
  position: absolute;
  top: 0;
  right: 100px;
}
.footLine1 {
  position: absolute;
  bottom: 16px;
  right: 0;
  width: 75%;
  height: 1px;
  background: #c69564;
}
.footLine2 {
  position: absolute;
  bottom: -12px;
  right: 160px;
  transform: rotate(45deg);
  width: 1px;
  height: 200px;
  background: #c69564;
}
</style>
